<template>
  <div class="container" style="height: 640px; overflow: auto">
    <div class="select-container">
      <el-input
        size="small"
        style="width: 200px;"
        class="filter-item"
        placeholder="输入岗位名称"
        v-model="name"
        clearable
        @change="title_change"
        prefix-icon="el-icon-search"
      >
      </el-input>
      <el-input
        size="small"
        style="width: 200px;"
        class="filter-item"
        placeholder="输入岗位英文名称"
        v-model="nameEn"
        clearable
        @change="entitle_change"
        prefix-icon="el-icon-search"
      >
      </el-input>
    </div>
      <div class="filter">
        <el-row :gutter="20">
          <el-col :span="10">
            <span style="line-height: 33px;padding-left:10px;">{{dutyanotherName}}岗位列表</span>
          </el-col>
          <el-col :span="14" style="text-align: right;">
            <el-button size="small" type="primary" @click="createClick()" style="margin-right: 10px">创建岗位</el-button>
          </el-col>
        </el-row>
      </div>
      <div class="data-contant"  style="height: 300px;">
        <div>
          <el-table
            :key='tableKey'
            :data="list.records"
            v-loading="listLoading"
            element-loading-text="给我一点时间"
            height="330px"
            size="small"
            stripe
            style="width: 100%;border:#eeeeee"
            highlight-current-row>
            <el-table-column
              align="center"
              type="index"
              width="80"
              label="序号"
            >
            <template slot-scope="scope">
            <span>{{scope.$index + (serialNumber - 1) * 10 + 1}}</span>
            </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="岗位名称"
              prop="name"
            >
            </el-table-column>

            <el-table-column
              align="center"
              label="岗位名称英文"
              prop="nameEn"
            >
            </el-table-column>
            <el-table-column
              align="center"
              label="岗位等级"
              prop="grade"
            >
            </el-table-column>
            <el-table-column
              align="center"
              label="最后修改人"
              prop="lmUser"
            >
            </el-table-column>
            <el-table-column align="center" label="操 作" width="220px" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button style="width:24px; margin-left:-36px;" type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
                <el-button style="width:24px;" type="text" size="small" @click="handleDelete(scope.row,'delete')">删除</el-button>
                <el-button style="width:24px;" type="text" size="small" @click="deploy(scope.row)">配置岗位人员</el-button>

              </template>
            </el-table-column>
          </el-table>
          <div class="pagination-container">
            <el-pagination
              layout="total, prev, pager, next, jumper"
              :page-size = "this.postList.rowBounds.limit"
              :total="this.list.count"
              @current-change="current_change"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    <!--创建岗位弹出层-->
    <el-dialog
      v-if="dialogVisibleSysDuty"
      :close-on-click-modal="false"
      title="创建岗位"
      :visible.sync="dialogVisibleSysDuty"
      width="70%">
      <dutyAdd :sysDutyData="sysDutyData" @changeCloseDialog="changeCloseDialog"></dutyAdd>
    </el-dialog>
    <!--编辑岗位弹出层-->
    <el-dialog
      v-if="dialogVisibleEditSysDuty"
      :close-on-click-modal="false"
      title="编辑岗位"
      :visible.sync="dialogVisibleEditSysDuty"
      width="70%">
      <dutyUpdate :sysDutyEditData="sysDutyEditData" @changeCloseDialog="changeCloseDialog"></dutyUpdate>
    </el-dialog>
    <!--配置岗位人员弹出层-->
    <el-dialog
      v-if="dialogVisibleJobUser"
      :close-on-click-modal="false"
      title="配置岗位人员"
      :visible.sync="dialogVisibleJobUser"
      width="70%">
      <jobUser :JobUserData="JobUserData" @changeCloseDialog="changeCloseDialog"></jobUser>
    </el-dialog>
  </div>
</template>

<script>
  import dutyAdd from './dutyAdd'
  import dutyUpdate from './dutyUpdate'
  import jobUser from './components/jobUser'
  const store = require('store')
  const nameCondition = {
    'property': 'name',
    'value': '',
    'type': 'LIKE'
  }
  const ennameCondition = {
    'property': 'nameEn',
    'value': '',
    'type': 'LIKE'
  }
  export default {
    components: {
      dutyAdd,
      dutyUpdate,
      jobUser
    },
    data() {
      return {
        dialogVisibleSysDuty: false,
        dialogVisibleEditSysDuty: false,
        dialogVisibleJobUser: false,
        name: '',
        nameEn: '',
        sysDutyData: {},
        sysDutyEditData: {},
        JobUserData: {},
        dutyanotherName: store.get('dutyanotherName'),
        deployVisible: false,
        dappendVisible: false,
        updateVisible: false,
        tableKey: 0,
        list: {},
        postList: {
          condition: [
            {
              'property': 'status',
              'value': '2',
              'type': 'NE'
            },
            {
              'property': 'orgId',
              'value': '',
              'type': 'EQ'
            }
          ],
          sort: [{
            direction: 'DESC',
            property: 'fcTime'
          }],
          rowBounds: {
            offset: 0,
            limit: 10
          }
        },
        listLoading: false,
        fliter: [
          Object.assign({}, nameCondition),
          Object.assign({}, ennameCondition)
        ],
        deletelist: {},
        count: 0,
        selectValue: 1,
        groupId: '',
        serialNumber:1
      }
    },
    created() {
      this.fetchData()
    },
    watch: {
      // 如果路由有变化，会再次执行该方法
      '$route.name': ['fetchData']
    },
    beforeRouteUpdate(to, from, next) {
      // just use `this`
      next()
      this.fetchData()
      this.dutyanotherName = store.get('dutyanotherName')
    },
    beforeRouteEnter(to, from, next) {
      next(vm => {
        vm.fetchData()
      })
      this.dutyanotherName = store.get('dutyanotherName')
    },
    methods: {
      changeCloseDialog() {
        this.dialogVisibleSysDuty = false
        this.dialogVisibleEditSysDuty = false
        this.dialogVisibleJobUser = false
        this.fetchData()
      },
      fetchData(flag) {
        this.listLoading = true
        this.postList.condition[1].value = this.$route.params.id
        if (flag == 'delete') {
          if (this.postList.rowBounds.offset == (this.list.count-1)
           && this.postList.rowBounds.offset >= this.postList.rowBounds.limit) {
            this.postList.rowBounds.offset -=this.postList.rowBounds.limit
            this.serialNumber -=1
          }
        }
        this.$store.dispatch('SysGroupselect', this.postList).then(res => {
          this.list = res.data
          this.listLoading = false
        }).catch((err) => {
          console.log(err)
        })
      },
      deleteData(flag) {
        this.$store.dispatch('SysGroupDelete', this.deletelist).then(res => {
          this.fetchData(flag)
        }).catch((err) => {
          console.log(err)
        })
      },
      handleDelete(row,flag) {
        this.$confirm('删除岗位将删除岗位用户及岗位角色，是否删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deletelist.id = row.id
          this.deleteData(flag)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      createClick() {
        this.sysDutyData = {
          orgId: this.$route.params.id,
          anotherName: this.$route.params.anotherName
        }
        this.dialogVisibleSysDuty = true
        // this.$router.push({
        //   name: 'dutyAdd',
        //   params: {
        //     orgId: this.$route.params.id,
        //     anotherName: this.$route.params.anotherName
        //   }
        // })
      },
      handleEdit(row) {
        this.sysDutyEditData = {
          'id': row.id,
          'orgId': row.orgId,
          'name': row.name,
          'nameEn': row.nameEn,
          'shortName': row.shortName,
          'code': row.code,
          'type': row.type,
          'grade': row.grade,
          'remarks': row.remarks,
          'innerFlag': row.innerFlag,
          'status': row.status
        }
        this.dialogVisibleEditSysDuty = true
        // this.$router.push({
        //   name: 'dutyUpdate',
        //   params: {
        //     updatelist: {
        //       'id': row.id,
        //       'orgId': row.orgId,
        //       'name': row.name,
        //       'nameEn': row.nameEn,
        //       'shortName': row.shortName,
        //       'code': row.code,
        //       'type': row.type,
        //       'grade': row.grade,
        //       'remarks': row.remarks,
        //       'innerFlag': row.innerFlag,
        //       'status': row.status
        //     }
        //   }
        // })
      },
      current_change(currentPage) { // 通过分页获取数据
        this.serialNumber = currentPage
        const page = currentPage - 1
        this.postList.rowBounds.offset = page * 10
        this.fetchData()
      },
      title_change(type) { // 分类数据
        if (type === null) {
          const nullfliter = this.fliter.concat()
          const condition = [{'property': 'status',
                                          'value': '2',
                                          'type': 'NE'
                                        },
                                        {
                                          'property': 'orgId',
                                          'value': '',
                                          'type': 'EQ'
                                        }
                                      ]
          for (let i = 0; i < nullfliter.length; i++) {
            if (nullfliter[i].property === 'name') {
              nullfliter.splice(i, 1)
              this.fliter[i].value = ''
            }
          }
          for (let i = 0; i < nullfliter.length; i++) {
            if (nullfliter[i].value === '') {
              continue
            }
            condition.push(nullfliter[i])
          }
          this.postList.condition = condition
          console.log(this.postList)
          this.postList.rowBounds = {
            'offset': 0,
            'limit': 10
          }
          this.fetchData()
        } else {
          const conditionTimefliter = this.fliter.concat()
          const condition = [{'property': 'status',
                              'value': '2',
                              'type': 'NE'
                            },
                            {
                              'property': 'orgId',
                              'value': '',
                              'type': 'EQ'
                            }
                          ]
          for (let i = 0; i < conditionTimefliter.length; i++) {
            if (conditionTimefliter[i].property === 'name') {
              conditionTimefliter[i].value = type
              this.fliter[i].value = type
            }
          }
          for (let i = 0; i < conditionTimefliter.length; i++) {
            if (conditionTimefliter[i].value === '') {
              continue
            }
            condition.push(conditionTimefliter[i])
          }
          this.postList.condition = condition
          this.postList.rowBounds = {
            'offset': 0,
            'limit': 10
          }
          this.fetchData()
        }
      },
      entitle_change(type) { // 分类数据
        if (type === null) {
          const nullfliter = this.fliter.concat()
          const condition = [{'property': 'status',
                              'value': '2',
                              'type': 'NE'
                            },
                            {
                              'property': 'orgId',
                              'value': '',
                              'type': 'EQ'
                            }
                          ]
          for (let i = 0; i < nullfliter.length; i++) {
            if (nullfliter[i].property === 'nameEn') {
              nullfliter.splice(i, 1)
              this.fliter[i].value = ''
            }
          }
          for (let i = 0; i < nullfliter.length; i++) {
            if (nullfliter[i].value === '') {
              continue
            }
            condition.push(nullfliter[i])
          }
          this.postList.condition = condition
          this.postList.rowBounds = {
            'offset': 0,
            'limit': 10
          }
          this.fetchData()
        } else {
          const conditionTimefliter = this.fliter.concat()
          const condition = [{'property': 'status',
                              'value': '2',
                              'type': 'NE'
                            },
                            {
                              'property': 'orgId',
                              'value': '',
                              'type': 'EQ'
                            }
                          ]
          for (let i = 0; i < conditionTimefliter.length; i++) {
            if (conditionTimefliter[i].property === 'nameEn') {
              conditionTimefliter[i].value = type
              this.fliter[i].value = type
            }
          }
          for (let i = 0; i < conditionTimefliter.length; i++) {
            if (conditionTimefliter[i].value === '') {
              continue
            }
            condition.push(conditionTimefliter[i])
          }
          this.postList.condition = condition
          this.postList.rowBounds = {
            'offset': 0,
            'limit': 10
          }
          this.fetchData()
        }
      },
      deploy(row) {
        this.JobUserData = {
          groupId: row.id,
          orgId: this.$route.params.id
        }
        this.dialogVisibleJobUser = true
        // this.$router.push({
        //   name: 'jobUser',
        //   params: {
        //     groupId: row.id,
        //     orgId: this.$route.params.id
        //   }
        // })
      }
    }
  }
</script>

<style scoped>
  .container{
    padding: 20px;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .select-container{
    padding: 10px 10px;
    margin-bottom: 10px;
    border-radius: 4px;
    border: 1px solid#e4e7ed;
  }
  .list-container{
    margin-top:30px;
    padding:0 10px 10px 10px;
    border:1px solid#e4e7ed;
    border-radius: 4px;
  }
  .data-contant{
    padding: 30px 10px 20px;
  }
  .data-detail{
    font-size: 14px;
    padding:20px 0;
    text-align: center;
  }
  .data-title{
    font-size: 14px;
    padding:10px 0;
    text-align: center;
  }
  .data-title div{
    font-size: 14px;
    padding:5px 0;
  }
  .filter{
    padding: 10px 5px;
    border-bottom: 2px solid#e4e7ed;
  }
  .list-container{
  }
  .bold{
    font-weight: bold;
  }
</style>
